<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>游记明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/thumbsUp.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/strategyCatalogs.css">
    <link rel="stylesheet" type="text/css" href="/css/A-emoji.css">
    <script src="/js/plugins/A-emoji.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script>
        function successAlert(data) {
            if (data.success) {
                $(document).dialog({
                    type: 'alert',
                    closeBtnShow: false,
                    content: '评论成功',
                })
                setTimeout(function () {
                    location.reload();
                }, 500);
            }
        }

        $(function () {
            //获取url中的数据
            var params = getParams();
            var user = JSON.parse(sessionStorage.getItem("user"));
            if (params.id) {
                //请求查询某个游记
                $.get('/travels/' + params.id, function (data) {
                    $('.travels').renderValues(data,{
                        getHref:function (item, value) {
                            $(item).attr('href',$(item).data('href')+value)
                        }
                    });
                });

                //获取点赞个数
                function getZenNum() {
                    $.get("/Zans/count", {type: 0, typeId: params.id}, function (data) {
                        $('#likeBtn').html(data);
                    })
                }

                getZenNum();

                //获取点赞的样式颜色
                function getZanColor() {
                    $.get('/Zans/zan', {type: 0, typeId: params.id, userId: user.id}, function (data) {
                        if (data.success) {
                            $("#likeBtn").css("color", "red");
                        } else {
                            $("#likeBtn").css("color", "");
                        }
                    })
                }

                if (user) {
                    getZanColor();
                }
                $("#likeBtn").click(function () {
                    if (!user) {
                        $(document).dialog({
                            type: 'confirm',
                            closeBtnShow: false,
                            content: '先登录下吧,亲',
                            onClickConfirmBtn: function () {
                                location.href = "/login.html"
                            }
                        })
                    }
                    $.post('/Zans/saveOrDelete', {type: 0, typeId: params.id}, function (data) {
                        getZenNum();
                        if (user) {
                            getZanColor();
                        }
                    })
                })
            }
            //声明一个变量,用于当前页的增加
            var currentPage = 1;
            //总页数
            var pages;
            //存储游记的数组
            var travelArr = [];

            //定义一个函数,函数里发请求,使得变量的值金有限于该次访问
            function query() {
                $.get("/comments/" + params.id, {currentPage: currentPage}, function (data) {

                    console.log(data);
                    $.merge(travelArr, data.list);
                    var json = {list: travelArr};
                    $('#display').renderValues(json, {
                        getFromUserId: function (item, value) {
                            $(item).attr("data-id", value);
                        }, getCommentUserId: function (item, value) {
                            $(item).attr("data-id", value);
                        }, getToUserId: function (item, value) {
                            $(item).attr("data-id", value);
                        }, getcommenttId: function (item, value) {
                            $(item).attr("data-id", value);
                        }, getZanStyle: function (item, value) {
                            if (value == 1) {
                                $(item).css("color", "red");
                            } else {
                                $(item).css("color", "");
                            }
                        },getHref:function (item, value) {
                            $(item).attr('href',$(item).data('href')+value)
                        }
                    });

                    //获取总页数
                    pages = data.pages;
                    //点击图标回复
                    $('.reply_Bth').click(function () {
                        if (!user) {
                            $(document).dialog({
                                type: 'confirm',
                                closeBtnShow: false,
                                content: '先登录下吧,亲',
                                onClickConfirmBtn: function () {
                                    location.href = "/login.html"
                                }
                            })
                        } else {
                            console.log($(this).data("id"));
                            //被回复人的id
                            var commentUserId = $(this).data("id")
                            var commentId = $(this).closest(".content").find(".listComment").data("id");
                            $('#commentId').val(commentId)
                            $('#TargetUserId').val(commentUserId)
                            $('#exampleModal').modal("show")
                        }
                    })
                    //点击fromuser进行回复
                    $('.FromUserId').click(function () {
                        if (!user) {
                            $(document).dialog({
                                type: 'confirm',
                                closeBtnShow: false,
                                content: '先登录下吧,亲',
                                onClickConfirmBtn: function () {
                                    location.href = "/login.html"
                                }
                            })
                        } else {
                            var commentUserId = $(this).data("id")
                            var commentId = $(this).closest(".content").find(".listComment").data("id");
                            $('#commentId').val(commentId)
                            $('#TargetUserId').val(commentUserId)
                            $('#exampleModal').modal("show")
                        }
                    })
                    //点击TOuser进行回复
                    $('.ToUserId').click(function () {
                        if (!user) {
                            $(document).dialog({
                                type: 'confirm',
                                closeBtnShow: false,
                                content: '先登录下吧,亲',
                                onClickConfirmBtn: function () {
                                    location.href = "/login.html"
                                }
                            })
                        } else {
                            var commentUserId = $(this).data("id")
                            var commentId = $(this).closest(".content").find(".listComment").data("id");
                            $('#commentId').val(commentId)
                            $('#TargetUserId').val(commentUserId)
                            $('#exampleModal').modal("show")
                        }
                    })

                    //点赞事件
                    $(".zan").click(function () {
                        var currentItem = $(this);
                        if (!user) {
                            $(document).dialog({
                                type: 'confirm',
                                closeBtnShow: false,
                                content: '先登录下吧,亲',
                                onClickConfirmBtn: function () {
                                    location.href = "/login.html"
                                }
                            })
                        } else {
                            var commentId = $(this).closest(".content").find(".listComment").data("id")
                            $.post('/Zans/saveOrDelete', {type: 1, typeId: commentId}, function (data) {
                                $.get("/Zans/count", {type: 1, typeId: commentId}, function (data) {
                                    //$('.zanCount').html(data);
                                    currentItem.html('<span class="zanCount">' + data + '</span>')
                                })
                                if (user) {
                                    $.get('/Zans/zan', {type: 1, typeId: commentId, userId: user.id}, function (data) {
                                        if (data.success) {
                                            currentItem.css("color", "red");
                                        } else {
                                            currentItem.css("color", "");
                                        }
                                    })
                                }
                            })
                        }
                    })
                    //评论
                    $('#commentBtn').click(function () {
                        if (!user) {
                            $(document).dialog({
                                type: 'confirm',
                                closeBtnShow: false,
                                content: '先登录下吧,亲',
                                onClickConfirmBtn: function () {
                                    location.href = "/login.html"
                                }
                            })
                        } else {
                            $('#travelId').val(params.id)
                            $('#exampleModal1').modal("show")
                        }
                    })

                    //提交评论模态框
                    $("#commentBttn").click(function () {
                        $("#editForm").ajaxSubmit(function (data) {
                            successAlert(data);
                        })
                    })
                    //回复提示
                    $('#appendBtn').click(function () {
                        $("#editFormm").ajaxSubmit(function (data) {
                            successAlert(data);
                        })
                    })


                });
                //当前页加1
                currentPage = currentPage + 1;
            }

            //执行函数
            query();
            //滚动事件
            $(window).scroll(function () {
                if ($(window).height() + $(document).scrollTop() + 1 >= $(document).height()) {
                    if (currentPage <= pages) {
                        query();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            content: '<span class="info-text">已经到底了</span>',
                            autoClose: 500
                        })
                    }
                }
            })



            //每次进入这个页面
            $.post("/collects/views",{'travelCollect.id':params.id},function (data) {

            })

            //获取当前登录用户的id
            var user = JSON.parse(sessionStorage.getItem("user"));
            console.log(user);
            //收藏数量显示
            if(user==null){
                //如果用户没有登录 显示普通状态
                $.get("/collects/",{'travelCollect.id':params.id}, function (data) {
                    console.log(data);
                    //设置浏览量
                    $("#view").html(data.views);
                    //设置收藏总数
                    $("#collect").html(data.collects);
                })
            }else {
                //如果用户登录 判断是否点赞
                $.get("/collects/",{'travelCollect.id':params.id,'user.id':user.id}, function (data) {
                    //判断当前用户是否收藏
                    //有收藏
                    if(data.isCollect){
                        //设置背景颜色
                        $("#collectBtn").attr("style","color: red");
                        //设置点赞总数
                        $("#collect").html(data.collects);

                        //设置浏览量
                        $("#view").html(data.views);
                    }
                    //设置浏览量
                    $("#view").html(data.views);
                    //设置点赞总数
                    $("#collect").html(data.collects);
                })
            }

            //绑定点击收藏事件

            $("#collectBtn").click(function () {
                if (user!=null) {
                    //发送请求获取当前文章的点赞信息
                    $.ajax({
                        url: '/collects',
                        type: 'put',
                        data: {
                            'travelCollect.id': params.id,
                            'user.id': user.id
                        },
                        success: function (susu) {
                            $.get("/collects/",{'travelCollect.id':params.id,'user.id':user.id}, function (data) {
                                //判断当前用户是否收藏
                                //有收藏
                                if(susu.success){
                                    //设置背景颜色
                                    $("#collectBtn").attr("style","color: red");
                                    //设置点赞总数
                                    $("#collect").html(data.collects);
                                    //设置浏览量
                                    $("#view").html(data.views);
                                }else {
                                    $("#collectBtn").attr("style","");

                                    //设置浏览量
                                    $("#view").html(data.views);
                                    //设置点赞总数
                                    $("#collect").html(data.collects);
                                }

                            })

                        },
                    })
                } else {
                    $(document).dialog({
                        type: 'notice',
                        content: '<span class="info-text">亲,请先登录</span>',
                        autoClose: 2000
                    })
                }
            })
        })
    </script>
    <style type="text/css">
        #display {
            margin-bottom: 100px;
            overflow: auto;
        }

        .postinput {
            height: 4rem;
            padding: .5rem;
            background-color: #fff;
            border-top: .1rem #ededed solid;
            width: 400%;
            position: fixed;
            bottom: 0rem;
            font-size: 1.4rem;
        }

    </style>
</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels">
    <img  class="cover" render-src="coverUrl">
    <div class="container">
        <h6 class="title" render-html="title"></h6>
        <small>
            <span render-html="createTime"></span>
            浏览 <span id="view"> 0</span>
            收藏 <span id="collect"> 0</span>
        </small>
        <div class="row">
            <div class="col-2 img">
                <a data-href="/userProfiles.html?id=" render-fun="getHref" render-key="author.id">
                    <img  class="rounded-circle" render-src="author.headImgUrl" >
                </a>
            </div>
            <div class="col-6 mine">
                <small>
                    <span render-html="author.nickName"></span>
                    <button class="btn" id="followBtn">关注</button>
                    <br>
                    <span>0 </span>篇游记
                    <span>0 </span>粉丝
                </small>
            </div>
            <div class="attention col">
                <span class="addr" render-html="place.name"></span>
            </div>
        </div>
    </div>

    <div class="container">
        <fieldset>
            <legend>我的出行信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i> 出发时间 <span render-html="travelTime"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends"></span></div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 人物
                    <span render-html="personName"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                    <span render-html="days"></span>
                </div>
            </div>
        </fieldset>

        <div class="content" render-html="travelContent.content">

        </div>
    </div>

    <hr>

    <div class="container d-flex">
        <div class="p-2  flex-fill">
            <i class="fa fa-thumbs-o-up"  id="likeBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa  fa-commenting-o"  id="commentBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i  class="fa fa-star-o"  id="collectBtn"> </i>
        </div>
    </div>
</div>

<div id="display">
    <div render-loop="list">
        <div class="commentBox">
            <div class="li">
                <div class="icon" style="width: 50px">
                    <a data-href="/userProfiles.html?id=" render-fun="getHref" render-key="list.commentUser.id">
                        <img render-src="list.commentUser.headImgUrl">
                    </a>
                </div>
                <!--当前评论的id-->
                <div class="content">
                    <!--当前评论的id-->
                    <input type="hidden" render-key="list.id" render-fun="getcommenttId" class="listComment">
                    <div class="name" render-html="list.commentUser.nickName" id="listCommentUserName">belcheri
                    </div>
                    <div class="time" render-html="list.commentTime">2018-11-13 10:37:41</div>
                    <div class="text" id="replyContent" render-html="list.content">ssss</div>

                    <div render-loop="list.replyList">
                        <div>
                            <a role="button" render-html="list.replyList.fromUser.nickName" style="color: darkblue"
                               class="FromUserId"
                               render-key="list.replyList.fromUser.id" render-fun="getFromUserId">
                            </a>
                            回复:
                            <a role="button" render-html="list.replyList.toUser.nickName"
                               style="color: #c69500" class="ToUserId"
                               render-key="list.replyList.toUser.id" render-fun="getToUserId">
                            </a>
                            <span render-html="list.replyList.content" style="color: #6273D2"></span>
                        </div>
                    </div>

                    <div class="d-flex icon" id="rightId">
                        <input id="getCommentId" type="hidden" value="list.id">
                        <i class="fa  fa-commenting-o reply_Bth" style="margin-right: 5px"
                           render-key="list.commentUser.id" render-fun="getToUserId"> 回复 </i>
                        <i class="fa fa-thumbs-o-up zan" render-key="list.status"
                           render-fun="getZanStyle"> <span render-html="list.countZan" class="zanCount"></span> </i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--回复模态框-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document" style="margin-top: 50%">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="exampleModalLabel">回复框</h4>
            </div>
            <div class="modal-body">
                <form action="/replies" method="post" id="editFormm">
                    <div class="form-group">
                        <!--目标人id-->
                        <input type="hidden" name="toUser.id" id="TargetUserId">
                        <!--评论id-->
                        <input type="hidden" name="comment.id" id="commentId">
                        <label for="recipient-name" class="control-label">内容:</label>
                        <input type="text" class="form-control" id="recipient-name" name="content">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="appendBtn">回复</button>
            </div>
        </div>
    </div>
</div>
<!--评论模态框-->
<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document" style="margin-top: 50%">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="exampleModalLabel1">评论框</h4>
            </div>
            <div class="modal-body">
                <form action="/comments" method="post" id="editForm">
                    <div class="form-group">
                        <input type="text" name="content" placeholder="说些什么" style="width: 100%;height:63px" ;>
                        <input type="hidden" name="travel.id" id="travelId">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="commentBttn">评论</button>
            </div>
        </div>
    </div>
</div>
</body>

</html>